<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>题库页面</title>
  <link rel="icon" href="../image/logo.ico" type="image/x-icon">
  <script src="../plugs/layui/dist/layui.js"></script>
  <link href="../plugs/layui/dist/css/layui.css" rel="stylesheet">
  <script type="text/javascript" src="../js/head-nav.js"></script>
  <link rel="stylesheet" href="../css/swiper.min.css">
  <link rel="stylesheet" href="../css/base.css">
  <link rel="stylesheet" href="../css/problem.css">
  <script type="text/javascript" src="../js/jquery.min.js"></script>
  <script type="text/javascript" src="../js/swiper-bundle.min.js"></script>
  <script type="text/javascript" src="../js/template-web.js"></script>
  <link rel="stylesheet" type="text/css" href="../css/sign2.css">
  <script src="../js/jquery.min.js"></script>
  <script type="text/javascript" src="../js/calendar2.js"></script>
</head>

<body>


  <div class="layui-row layui-col-space12">
    <div class="layui-col-md2">
      <!-- 空白 -->
    </div>
    <div class="layui-col-md6">
      <div>
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
          <legend>推荐</legend>
        </fieldset>

        <div class="lb1" style="width: 700px;margin: 0 auto;">
          <div class="swiper-container swiper-container1">
            <div class="swiper-wrapper" id="key-links-words2">
              <div class="swiper-slide">
                <a href="javascript:" class="ellipsis">
                  <img src="../image/2.png" alt="">
                </a>
              </div>

              <div class="swiper-slide">
                <a href="javascript:" class="ellipsis">
                  <img src="../image/3.png" alt="">
                </a>
              </div>

              <div class="swiper-slide">
                <a href="javascript:" class="ellipsis">
                  <img src="../image/4.png" alt="">
                </a>
              </div>

              <div class="swiper-slide">
                <a href="javascript:" class="ellipsis">
                  <img src="../image/2.png" alt="">
                </a>
              </div>

              <div class="swiper-slide">
                <a href="javascript:" class="ellipsis">
                  <img src="../image/3.png" alt="">
                </a>
              </div>

              <div class="swiper-slide">
                <a href="javascript:" class="ellipsis">
                  <img src="../image/4.png" alt="">
                </a>
              </div>

              <div class="swiper-slide">
                <a href="javascript:" class="ellipsis">
                  <img src="../image/2.png" alt="">
                </a>
              </div>

              <div class="swiper-slide">
                <a href="javascript:" class="ellipsis">
                  <img src="../image/3.png" alt="">
                </a>
              </div>

              <div class="swiper-slide">
                <a href="javascript:" class="ellipsis">
                  <img src="../image/4.png" alt="">
                </a>
              </div>

              <div class="swiper-slide">
                <a href="javascript:" class="ellipsis">
                  <img src="../image/2.png" alt="">
                </a>
              </div>

            </div>
          </div>
          <div class="swiper-button-next swiper-button-next1"></div>
          <div class="swiper-button-prev swiper-button-prev1"></div>
        </div>

        <script type="text/html" id="lb-tpl">
{{each data item i}}
<div class="cont none">
<div class="swiper mySwiper{{i}}">
  <div class="swiper-wrapper">
      {{each item.list sub k }}
    <div class="swiper-slide">
       <div class="item">
          <div class="pic">
              <img src="{{sub.url}}">
              
           </div>
           <div id="container_small_tip{{i}}_{{k}}" class="container_small_tip">
              <div id="content_small_tip" class="content_small_tip" onclick=" handerWordRoll('{{i}}','{{k}}')">
              </div>
          </div>
          
       </div>
    </div>
    {{/each}}
  
  </div>
</div> 
</div>
{{/each}}
</script>

        <script type="text/javascript" src="../js/lb.js"></script>
        <script>
          info();

        </script>

      </div>
      <br>
      <div>
        <fieldset class="layui-elem-field layui-field-title">
          <legend>学习计划</legend>
        </fieldset>

        <div class="lb1" style="width: 700px;margin: 0 auto;">
          <div class="swiper-container swiper-container2">
            <div class="swiper-wrapper" id="key-links-words2">
              <div class="swiper-slide">
                <a href="javascript:" class="ellipsis">
                  <img src="../image/10.png" alt="">
                </a>
                <p style="text-align: center; font-size: medium;">算法</p>
              </div>

              <div class="swiper-slide">
                <a href="javascript:" class="ellipsis">
                  <img src="../image/1.png" alt="">
                </a>
                <p style="text-align: center; font-size: medium;">算法</p>
              </div>

              <div class="swiper-slide">
                <a href="javascript:" class="ellipsis">
                  <img src="../image/6.png" alt="">
                </a>
                <p style="text-align: center; font-size: medium;">算法</p>
              </div>

              <div class="swiper-slide">
                <a href="javascript:" class="ellipsis">
                  <img src="../image/7.png" alt="">
                </a>
                <p style="text-align: center; font-size: medium;">算法</p>
              </div>

              <div class="swiper-slide">
                <a href="javascript:" class="ellipsis">
                  <img src="../image/8.png" alt="">
                </a>
                <p style="text-align: center; font-size: medium;">算法</p>
              </div>

              <div class="swiper-slide">
                <a href="javascript:" class="ellipsis">
                  <img src="../image/9.png" alt="">
                </a>
                <p style="text-align: center; font-size: medium;">算法</p>
              </div>

              <div class="swiper-slide">
                <a href="javascript:" class="ellipsis">
                  <img src="../image/1.png" alt="">
                </a>
                <p style="text-align: center; font-size: medium;">算法</p>
              </div>


            </div>
          </div>
          <div class="swiper-button-next swiper-button-next2"></div>
          <div class="swiper-button-prev swiper-button-prev2"></div>
        </div>

        <script type="text/html" id="lb-tpl">
  {{each data item i}}
  <div class="cont none">
  <div class="swiper mySwiper{{i}}">
    <div class="swiper-wrapper">
        {{each item.list sub k }}
      <div class="swiper-slide">
         <div class="item">
            <div class="pic">
                <img src="{{sub.url}}">
                
             </div>
             <div id="container_small_tip{{i}}_{{k}}" class="container_small_tip">
                <div id="content_small_tip" class="content_small_tip" onclick=" handerWordRoll('{{i}}','{{k}}')">
                </div>
            </div>
            
         </div>
      </div>
      {{/each}}
    
    </div>
  </div> 
  </div>
  {{/each}}
  </script>

        <script type="text/javascript" src="../js/lb.js"></script>
        <script>
          info();

        </script>

      </div>

      <br><br>

      <form class="layui-form" action="">
        <div class="layui-row">
          <div class="layui-col-xs3">
            <div class="layui-inline">
              <div class="layui-input-inline" id="se1">
                <select name="modules" lay-verify="required" lay-search="" lay-filter="oneLeverChange" id="label"
                  lay-search>
                  <option value="" selected="true">标签</option>
                  <option v-for="li in list" :value="li.name" :selected="li.selected" id="tname">{{li.name}}</option>
                </select>
              </div>
            </div>
          </div>

          <div class="layui-col-xs1">&nbsp;</div>
          <div class="layui-col-xs2">
            <div class="layui-inline">
              <div class="layui-input-inline">

              </div>
            </div>
          </div>
          <div class="layui-col-xs1">&nbsp;</div>
          <div class="layui-col-xs5">
            <div class="layui-form-item">
              <div class="layui-input-inline">
                <input type="text" id="title_name" name="title_name" required lay-verify="required" placeholder="请输入题目名"
                  autocomplete="off" class="layui-input">
              </div>
              <div class="layui-form-mid" style="padding: 0!important;">
                <button type="button" class="layui-btn layui-btn-primary" lay-on="get-vercode" data-type="reload"
                  lay-filter="rechar_btn" id="reachar_btn">搜索</button>
              </div>
            </div>
          </div>
        </div>




      </form>



      <div>

        <table class="layui-hide" id="test" lay-filter="test"></table>
        <script>layui.use('table', function () {
            var table = layui.table;
            table.render({
              elem: '#test'
              , url: 'http://localhost:70/devp/problem'
              ,
              cols: [[
                { field: 'id', width: 120, sort: true, title: 'ID' }
                , { field: 'title', width: 120, templet: '#titleTpl', sort: true, title: '题目' }
                , { field: 'answer', width: 120, sort: true, templet: '#sexTpl', title: '题解' }
                , { field: 'passrate', width: 120, sort: true, title: '通过率' }
                , { field: 'difficulty', sort: true, width: 120, title: '难度' }
                , { field: 'frequency', width: 120, sort: true, title: '出现频率' }
              ]],
              page: true,
              limits: [10, 20, 30, 50]
              , limit: 10
              , parseData: function (res) {
                var result;
                console.log(this);
                console.log(JSON.stringify(res));
                if (this.page.curr) {
                  result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
                } else {
                  result = res.data.slice(0, this.limit);
                }
                return { "code": res.code, "msg": res.msg, "count": res.count, "data": result };
              }
            });


            $(document).on('click', "#reachar_btn", function () {

              alert(document.getElementById("title_name").value);

              table.reload('test', { url: 'http://localhost:70/devp/problem/titleContains/' + document.getElementById("title_name").value });
            });

            layui.use(['form'], function () {
              var form = layui.form;
              form.on('select(oneLeverChange)',
                function (data) {
                  var val = data.value;
                  // console.log(val);
                  table.reload('test', { url: 'http://localhost:70/devp/problem/' + val });
                });
            });

          });

        </script>

        <script type="text/html" id="titleTpl">
          <div onclick="ccg(this)" class="layui-table-link cc" target="_blank" >{{ d.title }}</div>
          <div style="display: none;">{{d.id}}</div>
        </script>

        <!-- <script type="text/html" id="answerTpl">
            <a href="#" class="layui-table-link" target="_blank">{{ d.answer }}</a>
        </script> -->
        <script src="../plugs/layui/src/"></script>
        <script>

          function ccg(a) {
            id = a.nextElementSibling.innerHTML;
            $(function () {
              $(".cc").on("click", function () {
                // alert(id)
                jump();
              });
            });
            function jump() {
              url = "doproblem.html?id=" + id;//此处拼接内容
              window.location.href = url;
            }
          }
        </script>

      </div>


    </div>


    <div class="layui-col-md3">
      <!-- 日历 -->
      <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
        <legend>每日打卡</legend>
      </fieldset>
      <div style="width: 270px; height: 258px;" id="calendar"></div>

      <div id="sign_note" style="padding: 30px;    font-size: 12px;">
        <span style="color:rgb(76, 0, 255);">*规则：本月打卡21天即可领取奖品</span>
      </div>
      <div>
        <button type="button" class="layui-btn layui-btn-lg layui-btn-radius layui-btn-primary"
          style="width: 270px; height: 80px;"><img src="../image/study.svg" alt=""> 学习计划广场<i
            class="layui-icon layui-icon-right"></i></button>
      </div>
      <br>
      <!-- 31 -->
      <div>
        <button type="button" class="layui-btn layui-btn-primary layui-border"
          style="width: 270px;height: 135px;background-image: url(../image/3.png); background-size: 100%;border-radius: 4%"></button>
      </div>
      <br>
      <div>
        <button type="button" class="layui-btn layui-btn-primary layui-border"
          style="width: 270px;height: 135px;background-image: url(../image/3.png); background-size: 100%;border-radius: 4%"></button>
      </div>
      <br>
      <div>
        <button type="button" class="layui-btn layui-btn-primary layui-border"
          style="width: 270px;height: 135px;background-image: url(../image/3.png); background-size: 100%;border-radius: 4%"></button>
      </div>
      <br>
      <div>
        <button type="button" class="layui-btn layui-btn-primary layui-border"
          style="width: 270px;height: 135px;background-image: url(../image/3.png); background-size: 100%;border-radius: 4%"></button>
        <script type="text/javascript">
          $(function () {
            //ajax获取日历json数据
            var signList = [{ "signDay": "09" }, { "signDay": "11" }, { "signDay": "12" }, { "signDay": "13" }];
            calUtil.init(signList);
          });
        </script>
      </div>

      <br>
      <br>
      <br>
      <div style="width: 270px;height: 462px;">
        <div class="layui-card">
          <div class="layui-card-header">精选题单</div>
          <div class="layui-card-body">
            <ul>
              <a href="#">
                <li style="padding: 2.5px;"><img src="../image/hot.png" alt="" width="32px" height="32px"><span>🔥
                    LeetCode 热题 HOT 100</span></li>
              </a>
              <a href="#">
                <li style="padding: 2.5px;"><img src="../image/hot.png" alt="" width="32px" height="32px"><span>🔥
                    LeetCode 热题 HOT 100</span></li>
              </a>
              <a href="#">
                <li style="padding: 2.5px;"><img src="../image/hot.png" alt="" width="32px" height="32px"><span>🔥
                    LeetCode 热题 HOT 100</span></li>
              </a>
              <a href="#">
                <li style="padding: 2.5px;"><img src="../image/hot.png" alt="" width="32px" height="32px"><span>🔥
                    LeetCode 热题 HOT 100</span></li>
              </a>
              <a href="#">
                <li style="padding: 2.5px;"><img src="../image/hot.png" alt="" width="32px" height="32px"><span>🔥
                    LeetCode 热题 HOT 100</span></li>
              </a>
              <a href="#">
                <li style="padding: 2.5px;"><img src="../image/hot.png" alt="" width="32px" height="32px"><span>🔥
                    LeetCode 热题 HOT 100</span></li>
              </a>
              <a href="#">
                <li style="padding: 2.5px;"><img src="../image/hot.png" alt="" width="32px" height="32px"><span>🔥
                    LeetCode 热题 HOT 100</span></li>
              </a>
              <a href="#">
                <li style="padding: 2.5px;"><img src="../image/hot.png" alt="" width="32px" height="32px"><span>🔥
                    LeetCode 热题 HOT 100</span></li>
              </a>
              <a href="#">
                <li style="padding: 2.5px;"><img src="../image/hot.png" alt="" width="32px" height="32px"><span>🔥
                    LeetCode 热题 HOT 100</span></li>
              </a>
            </ul>
          </div>
        </div>
      </div>

      <div style="width: 270px;height: 462px;">
        <div class="layui-card">
          <div class="layui-card-header">热门企业<a
              href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              更多</a></div>
          <div class="layui-card-body">
            <ul>
              <a href="#">
                <li style="padding: 2.5px;"><img src="../image/hot.png" alt="" width="32px"
                    height="32px"><span>miHoYo</span></li>
              </a>
              <a href="#">
                <li style="padding: 2.5px;"><img src="../image/hot.png" alt="" width="32px"
                    height="32px"><span>miHoYo</span></li>
              </a>
              <a href="#">
                <li style="padding: 2.5px;"><img src="../image/hot.png" alt="" width="32px"
                    height="32px"><span>miHoYo</span></li>
              </a>
              <a href="#">
                <li style="padding: 2.5px;"><img src="../image/hot.png" alt="" width="32px"
                    height="32px"><span>miHoYo</span></li>
              </a>
              <a href="#">
                <li style="padding: 2.5px;"><img src="../image/hot.png" alt="" width="32px"
                    height="32px"><span>miHoYo</span></li>
              </a>
              <a href="#">
                <li style="padding: 2.5px;"><img src="../image/hot.png" alt="" width="32px"
                    height="32px"><span>miHoYo</span></li>
              </a>
              <a href="#">
                <li style="padding: 2.5px;"><img src="../image/hot.png" alt="" width="32px"
                    height="32px"><span>miHoYo</span></li>
              </a>
              <a href="#">
                <li style="padding: 2.5px;"><img src="../image/hot.png" alt="" width="32px"
                    height="32px"><span>miHoYo</span></li>
              </a>

            </ul>
          </div>
        </div>
      </div>



    </div>

    <div class="layui-col-md1">
      <!-- 空白 -->

    </div>

  </div>




  <script src="../js/bottom-nav.js"></script>
  <script src="../js/vue.js"></script>
  <script src="../js/jquery.min.js"></script>
  <script>
      let vm = new Vue({
      el: "#se1",
      data: {
        list: ""
      },
      created(){
        $.ajax({
      type: 'get',
      url: 'http://localhost:70/devp/tag',
      success: function (res) {
        console.log(res)
        vm.list=res;
        console.log(vm.list)
        // arrs =Arrays.asList(arrs);
        // for (let key in arrs) {
        //  console.log(arrs[key])
        //  arr.push(arrs[key])
        // }
  
      }
    })
      }
    })

    $(function(){

      
  
  })

  

   


  </script>
</body>

</html>